<template>
  <div>
    <div class="chart-box">
      <div class="search-box">
        <input type="text" list="questionnaire-list" name="questionnaire-id" placeholder="请输入标题搜索" v-model:value="questionnaireTitle" @change="search()"/>
        <input type="button" value="搜索" class="search-btn" @click="search()"/>
        <datalist id="questionnaire-list">
          <option v-for="questionnaireResultList in questionnaireResultList">{{questionnaireResultList.title}}</option>
        </datalist>
      </div>
      <div v-for="(question,index) in selectedQuestionnaire.result" :ref="question.title" :id="question.title" class="my-chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnswerResult",
  data(){
    return{
      questionnaireTitle: '学生调查',
      questionnaireResultList:[
          //第一个问卷
        {
          title: '学生调查1',
          id:'1232323',
          startTime:'',
          stopTime:'',
          result:[
              //第一道题的ABCD的选择情况
            {
              title: '最喜欢的课程1',
              options:[
                {option:'数学',count:243},
                {option:'语文',count:567},
                {option:'英语',count:16},
                {option:'地理',count:116},
              ]
            },
            {
              title: '最喜欢的课程2',
              options:[
                {option:'数学',count:206},
                {option:'语文',count:78},
                {option:'英语',count:1},
                {option:'地理',count:16},
              ]
            },
            {
              title: '最喜欢的课程3',
              options:[
                {option:'数学',count:283},
                {option:'语文',count:600},
                {option:'英语',count:160},
                {option:'地理',count:11},
              ]
            },
            {
              title: '最喜欢的课程4',
              options:[
                {option:'数学',count:6},
                {option:'语文',count:60},
                {option:'英语',count:16},
                {option:'地理',count:16},
              ]
            },
            {
              title: '最喜欢的课程5',
              options:[
                {option:'数学',count:20},
                {option:'语文',count:600},
                {option:'英语',count:160},
                {option:'地理',count:106},
              ]
            },
          ]
        },
        {
          title: '学生调查2',
          id:'nskdnjsidjiowejuo',
          startTime:'',
          stopTime:'',
          result:[
            //第一道题的ABCD的选择情况
            {
              title: '最喜欢的课程1',
              options:[
                {option:'数学',count:206},
                {option:'语文',count:60},
                {option:'英语',count:16},
                {option:'地理',count:116},
              ]
            },
            {
              title: '最喜欢的课程2',
              options:[
                {option:'数学',count:256},
                {option:'语文',count:1232},
                {option:'英语',count:1565},
                {option:'地理',count:3545},
              ]
            },
            {
              title: '最喜欢的课程3',
              options:[
                {option:'数学',count:206},
                {option:'语文',count:4545},
                {option:'英语',count:44},
                {option:'地理',count:456},
              ]
            },
            {
              title: '最喜欢的课程4',
              options:[
                {option:'数学',count:3},
                {option:'语文',count:334},
                {option:'英语',count:4545},
                {option:'地理',count:45},
              ]
            },
            {
              title: '最喜欢的课程5',
              options:[
                {option:'数学',count:4545},
                {option:'语文',count:56},
                {option:'英语',count:165},
                {option:'地理',count:56},
              ]
            },
          ]
        }
      ],
      selectedQuestionnaire:{
        title: '学生调查',
        id:'sndjsidjiowue',
        startTime:'',
        stopTime:'',
        result:[
          //第一道题的ABCD的选择情况
          {
            title: '最喜欢的课程1',
            options:[
              {option:'数学',count:206},
              {option:'语文',count:60},
              {option:'英语',count:16},
              {option:'地理',count:116},
            ]
          },
        ]
      },
    }
  },
  methods:{
    renderChart(ele,option,data,title){
      let myChart = this.$bus.echarts.init(ele??document.getElementById('main'));
      option = option??{
        title: {
          text: title??this.questionnaireResultList[0].result[0].title,
          subtext: 'XXX',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data??[
              {value: 1048, name: 'A'},
              {value: 1048, name: 'B'},
              {value: 1048, name: 'C'},
              {value: 1048, name: 'D'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    showChart(){
      let data = [];
      this.selectedQuestionnaire.result.forEach(question=>{
        data = [];
        question.options.forEach(option=>{
          data.push( {value: option.count, name: option.option})
        })
        this.renderChart(this.$refs[question.title][0], null, data, question.title);
      })
    },
    search(){
      for (let i = 0; i < this.questionnaireResultList.length; i++) {
        if(this.questionnaireTitle === this.questionnaireResultList[i].title){
          this.selectedQuestionnaire = this.questionnaireResultList[i];
          this.showChart();
          break;
        }
      }
    }
  },
  mounted() {
    console.log(this.$refs);
    window.refs = this.$refs;
    this.showChart();
  }
}
</script>

<style scoped>
body{
  overflow: hidden;
}
.chart-box{
  overflow: scroll;
  position: fixed;
  background-color: #c29e80;
  left: 5%;
  width: 90%;
  height: 98%;
  top: 2px;
}

.my-chart {
  width: 46%;
  height: 60%;
  background-color: #f0f9eb;
  float: left;
  margin: 2%
}

.search-box{
  position: absolute;
  left: 20%;
  width: 60%;
  background-color: #50449f;
  display: flex;
  justify-content: center;
  top: 0px;
}

.search-box:hover{
  z-index: 1;
}

.search-btn{
  width: 70px;
  margin-left: 20px;
}
</style>